<template>
    <div>
        <!-- 头部刷新区域 -->
        <div class="setdiv">
            <span>系统首页</span>
            <el-button class="refreshRight" plain icon="el-icon-refresh" @click="Refresh">刷新</el-button>
        </div>
        <!-- 信息展示 -->
        <div class="content1">
            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-col :span="6">
                            <div class="iconTitle">
                                <span class="icon iconfont icon-dingdan"></span>
                            </div>
                        </el-col>
                        <el-col :span="18">
                            <div class="font_text">
                                <div class="font_st">今日订单数</div>
                                <div>
                                    <p>{{HeadData.Neworders}}</p>
                                </div>
                            </div>
                        </el-col>

                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-col :span="6">
                            <div class="iconTitle">
                                <span class="icon iconfont icon-dangrixiaoshoue"></span>
                            </div>
                        </el-col>
                        <el-col :span="18">
                            <div>
                                <div class="font_st">今日销售总额</div>
                                <div>
                                    <p>{{HeadData.Newtotal}}</p>
                                </div>
                            </div>
                        </el-col>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-col :span="6">
                            <div class="iconTitle">
                                <span class="icon iconfont icon-zuorixiaoshoue"></span>
                            </div>
                        </el-col>
                        <el-col :span="18">
                            <div>
                                <div class="font_st">昨日销售总额</div>
                                <div>
                                    <p>{{HeadData.Oldtotal}}</p>
                                </div>
                            </div>
                        </el-col>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-col :span="6">
                            <div class="iconTitle">
                                <span class="icon iconfont icon-xiaoshouzonge"></span>
                            </div>
                        </el-col>
                        <el-col :span="18">
                            <div>
                                <div class="font_st">近7天销售总额</div>
                                <div>
                                    <p>{{HeadData.Seventotal}}</p>
                                </div>
                            </div>
                        </el-col>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!-- 待处理事务 -->
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>待处理事务</span>
            </div>
            <el-row>
                <el-col :span="8">
                    <div>
                        <el-form label-width="100px">
                            <el-form-item label="待付款订单">
                                <p class="deal_p">(<span>{{ListData.Issued}}</span>)</p>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div>
                        <el-form label-width="100px">
                            <el-form-item label="待发货订单">
                                <p class="deal_p">(<span>{{ListData.Return}}</span>)</p>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div>
                        <el-form label-width="150px">
                            <el-form-item label="已完成订单">
                                <p class="deal_p">(<span>{{ListData.complete}}</span>)</p>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div>
                        <el-form label-width="150px">
                            <el-form-item label="已发货订单">
                                <p class="deal_p">(<span>{{ListData.delivery}}</span>)</p>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div>
                        <el-form label-width="200px">
                            <el-form-item label="待确认退货订单">
                                <p class="deal_p">(<span>{{ListData.payment}}</span>)</p>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div>
                        <el-form label-width="200px">
                            <el-form-item label="待处理换货订单">
                                <p class="deal_p">(<span>{{ListData.replacement}}</span>)</p>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <!-- 运营快捷入口 -->
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>待处理事务</span>
            </div>
            <!-- 具体跳转 -->
            <el-row class="jump">
                <el-col :span="4">
                    <div>
                        <div class="iconTitle" @click="jumpShop"><span class="icon iconfont icon-tianjiashangpin"></span></div>
                        <div>
                            <p>添加商品</p>
                        </div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="iconTitle" @click="jumpList"><span class="icon iconfont icon-dingdanliebiao"></span></div>
                    <div>
                        <p>订单列表</p>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="iconTitle" @click="jumpRole"><span class="icon iconfont icon-yonghuguanli"></span></div>
                    <div>
                        <p>用户管理</p>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="iconTitle" @click="jumpSales"> <span class="icon iconfont icon-03DMS_cuxiaoguanli"></span></div>
                    <div>
                        <p>促销管理</p>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="iconTitle" @click="jumpShuffing"><span class="icon iconfont icon-lunboguanli"></span></div>
                    <div>
                        <p>轮播管理</p>
                    </div>
                </el-col>

            </el-row>
        </el-card>
        <!-- 商品总览与用户总览 -->
        <el-row class="shopTotal">
            <!-- 商品总览 -->
            <el-col :span="12">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>商品总览</span>
                    </div>
                    <el-row>
                        <el-col :span="6">
                            <div class="totalRed"><span>{{shopData.been_on}}</span></div>
                            <div>
                                <p>已上架</p>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="totalRed"><span>{{shopData.been_off}}</span></div>
                            <div>
                                <p>已下架</p>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="totalRed"><span>{{shopData.nervous}}</span></div>
                            <div>
                                <p>库存紧张</p>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="totalRed"><span>{{shopData.all_goods}}</span></div>
                            <div>
                                <p>全部商品</p>
                            </div>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
            <!-- 用户总览 -->
            <el-col :span="12">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>用户总览</span>
                    </div>
                    <el-row>
                        <el-col :span="6">
                            <div class="totalRed"><span>{{UserData.newUser}}</span></div>
                            <div>
                                <p>新增用户</p>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="totalRed"><span>{{UserData.oldUser}}</span></div>
                            <div>
                                <p>昨日新增</p>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="totalRed"><span>{{UserData.newMonth}}</span></div>
                            <div>
                                <p>本月新增</p>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="totalRed"><span>{{UserData.allmembers}}</span></div>
                            <div>
                                <p>会员总数</p>
                            </div>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
        <!-- 订单统计图 -->
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>订单统计</span>
            </div>
            <div id="main" style="width: 800px;height:400px;">
            </div>
        </el-card>
        <!-- 销售统计图 -->
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>销售统计</span>
            </div>
            <div id="main1" style="width: 800px;height:400px;">
            </div>
        </el-card>
    </div>
</template> 
 <script>
import * as echarts from "echarts/core";
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from "echarts/charts";
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
    // LineChart,
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    LegendComponent,
} from "echarts/components";
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from "echarts/features";
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";
// 注册必须的组件
echarts.use([
    // LineChart,
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    BarChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer,
    LegendComponent,
]);
export default {
    data() {
        return {
            // 存放头部数据
            HeadData: {},
            // 存放订单列表的数据
            ListData: {},
            // 存放会员数据
            UserData: {},
            // 存放商品数据
            shopData: {},
        };
    },
    created() {
        this.getsales();
        this.getListData();
        this.getUserData();
        this.getshopData();
    },
    mounted() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("main"));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: "近一周订单统计",
            },
            tooltip: {},
            xAxis: {
                data: ["01-01", "01-02", "01-03", "01-04", "01-05", "01-06"],
            },
            yAxis: {},
            series: [
                {
                    name: "销量",
                    type: "bar",
                    data: [123, 23, 133, 200, 178, 123],
                },
            ],
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        var myChart = echarts.init(document.getElementById("main1"));
        // 指定图表的配置项和数据
        var option1 = {
            title: {
                text: "近一周销售统计",
            },
            tooltip: {},
            xAxis: {
                data: ["01-01", "01-02", "01-03", "01-04", "01-05", "01-06"],
            },
            yAxis: {},
            series: [
                {
                    name: "销量",
                    type: "bar",
                    data: [1233, 2333, 5555, 4444, 1333, 3333],
                },
            ],
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option1);
    },
    methods: {
        // 获取首页头部信息的数据
        getsales() {
            this.$axios({
                url: "/home/system",
            }).then((res) => {
                this.HeadData = res.data.data[0];
                // console.log(this.HeadData);
            });
        },
        // 获取订单列表的数据
        getListData() {
            this.$axios({
                url: "/home/system/things",
            }).then((res) => {
                this.ListData = res.data.data[0];
                console.log(this.ListData);
            });
        },
        // 初始化会员数据
        getUserData() {
            this.$axios({
                url: "/home/system/users",
            }).then((res) => {
                this.UserData = res.data.data[0];
                // console.log(this.UserData);
            });
        },
        //初始化商品数据
        getshopData() {
            this.$axios({
                url: "/home/system/goods",
            }).then((res) => {
                this.shopData = res.data.data[0];
                // console.log(this.UserData);
            });
        },
        // 刷新
        Refresh() {
            this.$message({
                message: "已刷新",
                type: "success",
            });
        },
        // 首页页面的快捷跳转
        jumpShop() {
            this.$router.push("/homeframe/goods/add");
            this.$store.commit("changePage", "/homeframe/goods/list");
        },
        jumpList() {
            this.$router.push("/homeframe/order/list");
            this.$store.commit("changePage", "/homeframe/order/list");
        },
        jumpRole() {
            this.$router.push("/homeframe/users/list");
            this.$store.commit("changePage", "/homeframe/users/list");
        },
        jumpSales() {
            this.$router.push("/homeframe/promotion/promotion");
            this.$store.commit("changePage", "/homeframe/promotion/promotion");
        },
        jumpShuffing() {
            this.$router.push("/homeframe/operate/banner");
            this.$store.commit("changePage", "/homeframe/operate/banner");
        },
    },
};
</script> 
<style lang="less" scoped>
// 头部刷新区域
.setdiv {
    background-color: #f2f2f2;
    padding: 17.5px 0;
    position: relative;
}
.setdiv > span {
    margin-left: 20px;
}
.refreshRight {
    position: absolute;
    right: 20px;
    top: 8px;
}
// 信息展示
.el-row {
    margin-bottom: 20px;
    &:last-child {
        margin-bottom: 0;
    }
}
.el-col {
    border-radius: 4px;
}
.bg-purple-dark {
    background: #99a9bf;
}
.bg-purple {
    background: white;
    border: 1px solid #f2f2f2;
    margin-top: 15px;
    padding: 20px;
}
.bg-purple-light {
    background: #e5e9f2;
}
.grid-content {
    min-height: 60px;
}
.row-bg {
    padding: 20px 0;
    background-color: #f9fafc;
}
.content1 {
    margin: 18px 20px;
}
.font_st {
    font-size: 16px;
    margin-bottom: 15px;
}
.iconTitle > span {
    font-size: 60px;
}
// 待处理事务的卡片
.el-card {
    margin: 20px;
}
.el-card /deep/ .el-card__header {
    background-color: #f2f2f2;
    // height: 40px;
}
.deal_p {
    margin-left: 100px;
}
.deal_p > span {
    color: red;
}
// 总数据的显示
.shopTotal {
    text-align: center;
}
.totalRed {
    color: red;
    font-size: 60px;
}
#main,
#main1 {
    margin: auto;
}
</style> 